<template>
  <Select clearable v-model="params.init" :placeholder="params.tip" :style="{width:params.width}" @on-change="selectItem" @on-open-change="showOptions">
    <Option v-for="item in selectList" :value="item.id" :key="item.id">{{ item.name }}</Option>
  </Select>
</template>

<script>
  export default {
    props: ['params'],
    data () {
      return {
        selectList: []
      }
    },
    mounted () {
      this.getList();
    },
    methods: {
      getList () {
        this.$get(this.params.url,this.params.searchParams)
          .then((res) => {
            this.selectList = res.data;
          }, (err) => {
            console.log(err);
          })
      },
      selectItem (value) {
        this.$emit('selectItem',value);
      },
      showOptions (value) {
        if(this.params.level === 0){
          return false;
        } else if(value){
          this.getList();
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
